<style>
    .forClean li .Img img{
        width: 100%;
        height: 100%;
    }
    .forClean .forAdd p{
        margin-bottom: .3rem;
    }
    .forClean li .Desc .address{
        font-size: 12px;   
        color: #666; 
    }
    .forClean .forBtn{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .forClean .forBtn button{
        padding: .2rem .5rem;  
        background: none;
        border: 1px solid #ccc;
        border-radius: .3rem;     

    }

@media screen and (min-width: 320px) and (max-width: 374px) {
    .forClean li{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 5px 6px;
        border-bottom: 1px solid #E6E6E6;
    }
    .forClean li .Img{
        width: 40%;
        height: 92.6px;
    }
    .forClean li .Desc{
        box-sizing: border-box;
        width: 56%;
        margin-left: 4%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;  
        padding: .2rem 0;      
    }
    .forClean .forBtn button{
        width: 4rem;
        height: 1.5rem;
        border-radius: 1rem;
        background: none;
        border: 1px solid #666;
    }

}
@media screen and (min-width: 375px) and (max-width: 413px) {   
    .forClean li{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 10px 12px;
        border-bottom: 1px solid #E6E6E6;
    }
    .forClean li .Img{
        width: 42%;
        height: 110px;
    }
    .forClean li .Desc{
        box-sizing: border-box;
        width: 54%;
        margin-left: 4%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;  
        padding: .3rem 0;      
    }
    .forClean .forBtn button{
        width: 4.5rem;
        height: 1.5rem;
        border-radius: 1rem;
        background: none;
        border: 1px solid #666;
    }
}
@media screen and (min-width: 414px) {
    .forClean li{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 10px 12px;
        border-bottom: 1px solid #E6E6E6;
    }
    .forClean li .Img{
        width: 42%;
        height: 123px;
    }
    .forClean li .Desc{
        box-sizing: border-box;
        width: 54%;
        margin-left: 4%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;  
        padding: .3rem 0;      
    }
    .forClean .forBtn button{
        width: 4.5rem;
        height: 1.5rem;
        border-radius: 1rem;
        background: none;
        border: 1px solid #666;
    }
}
</style>
<ul class="forClean">
    <li ng-repeat="CleanList in forClean track by $index">
        <div class="Img">
            <img ng-src="{{httpSrc+CleanList.img.img}}" alt="房间图片">
        </div>
        <div class="Desc">
            <div class="forAdd">
                <p>
                    {{CleanList.title}}
                </p>
                <p  class="address">
                    {{CleanList.address}}
                </p>
            </div>

            <div class="forBtn">
                <button  class="borGreen">开锁</button>
                <button  class="borGreen" ng-click="outcleanList($index,CleanList.id,CleanList.cleaner_id)" >完成打扫</button>

            </div>
        </div>
    </li>
</ul>